<template>
  <div class="appSelect">
    <el-dialog
      :visible="true"
      title="选择应用"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="dialog-body">
        <div class="app-header">
          <div class="tab-btns">
            <div
              v-for="(item, i) in list"
              :key="item.group_id"
              class="tab-btn"
              @click="tabChange(item, i)"
              :class="{active: active === i}"
            >
              <div class="tick" :class="{onlyRead: item.onlyRead}">
                <el-checkbox
                  @change="checkChange(item, i)"
                  :value="item.checked"
                ></el-checkbox>
              </div>
              {{ item.group_name }}
            </div>
          </div>
        </div>
        <div class="app-list">
          <el-scrollbar class="scroll-bar">
            <el-row>
              <el-col
                v-for="(item, i) in appList"
                :key="i"
                class="media-box app-box"
                :class="{
                  active: item.checked,
                  onlyRead: item.onlyRead
                }"
              >
                <img
                  v-show="item.checked"
                  src="~assets/img/tick.png"
                  class="tick"
                />
                <div class="media-con app-con" @click="doSelect(item, i)">
                  <div class="media-pic app-pic">
                    <img :src="item.app_icon" />
                  </div>
                  <el-tooltip
                    effect="dark"
                    :content="item.app_name"
                    placement="left"
                  >
                    <div class="media-name">
                      {{ item.app_name }}
                    </div>
                  </el-tooltip>
                  <div class="media-row dia-row">
                    <div class="key">上传人</div>
                    <el-tooltip
                      effect="dark"
                      :content="item.user"
                      placement="left"
                    >
                      <div class="val">
                        {{ item.user }}
                      </div>
                    </el-tooltip>
                  </div>
                  <div class="media-row dia-row">
                    <div class="key">备注</div>
                    <el-tooltip
                      effect="dark"
                      :content="item.remark"
                      placement="left"
                    >
                      <div class="val">
                        {{ item.remark }}
                      </div>
                    </el-tooltip>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-scrollbar>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "@/api";

export default {
  props: {
    apps: {
      type: Array,
      default: [],
    },
    app_groups: {
      type: Array,
      default: [],
    },
    action: {
      type: String,
    },
  },
  data() {
    return {
      active: 0,
      list: [],
      appList: [],
      upChecks: [],
      downChecks: [],
    };
  },
  watch: {},
  computed: {
    checkLength() {
      let checks = [];
      this.list.forEach((item) => {
        item.group.forEach((g) => {
          if (g.checked) {
            checks.push(g);
          }
        });
      });
      return checks.length;
    },
  },
  methods: {
    tabChange(item, i) {
      this.active = i;
      this.appList = item.group;
    },
    checkChange(item, i) {
      if (item.onlyRead) {
        return this.$message.warning("应用数只能增加不能减少");
      }
      
      item.checked = !item.checked;
      this.appList = item.group.map((g) => {
        if (!g.onlyRead) {
          g.checked = item.checked;
        }
        return g;
      });

      this.getChecks();
    },

    doSelect(child, i) {
      if (child.onlyRead) {
        return this.$message.warning("应用数只能增加不能减少");
      }
      let father = {};
      this.list.forEach((item) => {
        item.group.forEach((g) => {
          if (g.app_id === child.app_id) {
            father = item;
          }
        });
      });
      if (father.checked) {
        return;
      }
      child.checked = !child.checked;
      this.$set(this.appList, i, child);

      this.getChecks();
    },

    getChecks() {
      let downs = [];
      this.upChecks = this.list
        .map((item) => {
          if (item.checked) {
            return item.group_id;
          }
        })
        .filter((u) => u);

      this.list.forEach((item) => {
        let arr = [];
        if (!item.checked) {
          arr = item.group.map((g) => {
            if (g.checked) {
              return g.app_id;
            }
          });
        }
        downs.push(arr);
      });
      this.downChecks = downs.flat().filter((d) => d);
    },

    cancel() {
      this.$emit("cancel");
    },

    sure() {
      this.$emit("sure", this.downChecks, this.upChecks, this.checkLength);
    },

    async chooseAPPList() {
      const { code, data } = await api.license(this).chooseAPPList();
      if (code == 0) {
        this.list = data.map((item) => {
          item.checked = this.app_groups.includes(item.group_id);
          item.onlyRead = this.app_groups.includes(item.group_id);
          item.group.forEach((g) => {
            g.checked = item.checked || this.apps.includes(g.app_id);
            g.onlyRead = item.checked || this.apps.includes(g.app_id);
          });
          return item;
        });

        this.appList = this.list[0].group;
        this.getChecks()
      }
    },
  },
  created() {
    this.chooseAPPList();
  },
};
</script>

<style lang="stylus">

</style>